<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Andala</title>
    <link rel="stylesheet" type="text/css" href="./andala.css">
    <script src="./js/bundle.js"></script>
  </head>
  <body>
    <main>
      <section class="left-side-bar-selection">
        <div class="draw-instructions">
          <button id="canvas-reset-button" type="button" name="button">清除画布</button>
        </div>
        <div class="drawing-color">
          <p>画笔颜色</p>
          <ul class="brush-colors">
            <li id="red-brush" data-color="#FA5858" class=""></li>
            <li id="orange-brush" data-color="#FACC2E" class=""></li>
            <li id="yellow-brush" data-color="#F4FA58" class=""></li>
            <li id="green-brush" data-color="#81F79F" class=""></li>
            <li id="blue-brush" data-color="#81F7F3" class="drawing-color-selected"></li>
            <li id="purple-brush" data-color="#DA81F5" class=""></li>
            <li id="pink-brush" data-color="#F781F3" class=""></li>
            <li id="black-brush" data-color="black" class=""></li>
            <li id="white-brush" data-color="white" class=""></li>
            <li id="gray-brush" data-color="#A4A4A4" class=""></li>
          </ul>
        </div>

        <div class="canvas-background-color">
          <p>背景颜色</p>
          <ul class="canvas-backgrounds">
            <li id="black-background" data-background="black" class="canvas-background-selected"></li>
            <li id="white-background" data-background="white" class=""></li>
          </ul>
        </div>

        <div class="brush-size">
          <p>画笔大小</p>
          <ul class="brush-sizes">
            <li class="" data-brushsize="1">细</li>
            <li class="brush-size-selected" data-brushsize="3">中</li>
            <li class="" data-brushsize="6">粗</li>
          </ul>
        </div>

        <div class="canvas-symmetry">
          <p>对称性</p>
          <ul class="symmetry-choices">
            <label>数量<input id="radial-order" type="text" name="radial-order" value="5"></label>
            <li id="radial-symmetry" data-symmetry="RADIAL" class="symmetry-selected">径向</li>
            <li data-symmetry="HORIZONTAL" class="">水平</li>
            <li data-symmetry="VERTICAL" class="">垂直</li>
          </ul>
        </div>
      </section>

      <section class="canvas">
        <h1>andala</h1>
        <h3>点击任何地方，自由绘制。</h3>
        <canvas id="andala-canvas" width="800" height="800" style="background-color:black"></canvas>
      </section>
    </main>

    <section class="contact-icons">
      <p id="author">Created by: Alicia Underhill</p>
    </section>
  </body>
</html>
